<template>
  <div class="managebox">
    <div class="btn" @click="exit">
      <el-button type="primary" icon="el-icon-s-home" circle></el-button>
    </div>
    <div class="bg">
      <img src="https://i.loli.net/2020/10/13/AMQSXkZFKmfbanU.jpg" alt="" />
    </div>
    <div class="formbox">
      <el-form ref="login-form" :model="login" v-if="isLogin">
        <el-form-item>
          <el-input
            v-model="login.account"
            prefix-icon="el-icon-notebook-2"
            placeholder="请输入登陆账号"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            v-model="login.passWord"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item class="btn_box">
          <el-button type="primary" @click="onSubmit">登陆</el-button>
          <span class="register" @click="changeIsLogin">注册>></span>
        </el-form-item>
      </el-form>
      <el-form ref="register-form" :model="register" v-else>
        <el-form-item>
          <el-input
            v-model="register.name"
            prefix-icon="el-icon-user-solid"
            placeholder="请输入用户名"
            minlength="2"
            maxlength="4"
            type="text"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="请输入密码(5-10位数字、字母)"
            prefix-icon="el-icon-lock"
            v-model="register.passWord"
            type="password"
            show-password
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="register.inviteCode"
            prefix-icon="el-icon-notebook-2"
            placeholder="管理员权限码(如果不是管理员该项可以不填)"
          ></el-input>
        </el-form-item>
        <el-form-item class="btn_box">
          <el-button type="primary" @click="onRegister">注册</el-button>
          <span class="register" @click="changeIsLogin">登录>></span>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import request from "../../api/request"
export default {
  data() {
    return {
      isLogin: true,
      login: {
        account: "",
        passWord: "",
      },
      register: {
        name: "",
        passWord: "",
        inviteCode: "",
      },
    }
  },
  methods: {
    // 返回首页
    exit() {
      this.$router.push("/")
    },
    async onSubmit() {
      let res = await request({
        url: "/user/login",
        data: {
          account: this.login.account,
          passWord: this.login.passWord,
        },
        method: "post",
      })
      let { token, user } = res
      console.log(res)
      this.$store.commit("saveUser", user)
      window.localStorage.setItem(
        "blogToken",
        JSON.stringify({ token, date: new Date(), isTourists: user.isTourists })
      )
      if (res.status) {
        this.$notify({
          title: "成功",
          message: res.msg,
          type: "success",
        })
        this.$EventBus.$emit("changeIsLogin")
        this.$store.dispatch("SOCKET_USER_INFO") // socket连接
        setTimeout(() => {
          if (user.isAdmin) {
            this.$router.push("/backend")
          } else {
            this.$router.push("/")
          }
        }, 200)
        let result = await request({
          url: "/unread/obtain",
          data: {},
          method: "get",
        })
        this.$store.commit("pushCom", result.data)
        this.$store.commit("changeIsLogin", true)
      } else {
        this.$message.error(res.msg)
      }
    },
    async onRegister() {
      let nameLength = this.register.name.length
      let length = this.register.passWord.length
      let num = this.register.inviteCode.length
      if (length < 6 || length > 10) {
        this.$message({
          message: "密码长度为5-10位",
          type: "warning",
        })
        return
      }
      if (nameLength < 2 || nameLength > 4) {
        this.$message({
          message: "用户名长度为2-4个字符",
          type: "warning",
        })
        return
      }
      let res = await request({
        url: "/user/register",
        data: {
          userName: this.register.name,
          passWord: this.register.passWord,
          inviteCode: this.register.inviteCode,
        },
        method: "post",
      })
      if (res.status) {
        this.$alert(
          `注册成功，登陆账号为：<strong>${res.account}</strong> ，请保存好登陆账号，以免丢失`,
          "通知",
          {
            dangerouslyUseHTMLString: true,
          }
        )
      } else {
      }
    },
    changeIsLogin() {
      this.isLogin = !this.isLogin
    },
  },
}
</script>
<style lang="scss" scoped>
@import "../../scss/common.scss";
.managebox {
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 100;
  .btn {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 100;
  }
  .bg {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
.formbox {
  border-radius: 10px;
  z-index: 2;
  width: 400px;
  height: auto;
  text-align: center;
  background: white;
  padding: 0px 30px;
  padding-top: 40px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.btn_box {
  position: relative;
  .register {
    position: absolute;
    right: 10px;
    bottom: 0px;
    color: $ar_color;
    cursor: pointer;
  }
}
/deep/ .el-button--primary {
  color: #fff;
  background-color: $ar_color;
  border-color: $ar_color;
}
</style>
